<template>
  <div>
    <a-button type="primary" @click="handleAdd"> 新增 </a-button>
    <a-table :columns="columns" :row-key="(record) => record.id" :data-source="tableData">
      <template #isHidden="{ text: isHidden }">
        <a-switch :checked="isHidden" disabled />
      </template>
      <template #action="{ text }">
        <a-button type="primary" @click="handleEdit(text.id)">编辑</a-button>
        <a-button type="primary" @click="handleAddChild(text.id)">添加子项</a-button>
        <a-popconfirm
          title="确认删除此菜单？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="handleDelte(text.id)"
        >
          <a-button type="primary">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
  <DialogEdit ref="DialogEdit" />
</template>
<script lang="ts">
  import { defineComponent, provide, ref } from "vue";
  import { columns } from "./option";
  import { getMenuPage, deleteMenu } from "/@/api/sys/menu/index";
  import DialogEdit from "./Components/DialogEdit.vue";
  import { message } from "ant-design-vue";
  export default defineComponent({
    components: {
      DialogEdit,
    },
    setup() {
      const tableData = ref([]);
      // 加载数据
      const loadPage = async () => {
        const { data } = await getMenuPage();
        if (data) {
          tableData.value = data.records;
        }
      };
      loadPage();
      provide("loadPage", loadPage);
      // 新增
      const DialogEdit = ref();
      const handleAdd = () => {
        DialogEdit.value.open();
      };
      const handleEdit = (id: number) => {
        DialogEdit.value.open(id);
      };
      const handleDelte = async (id: number) => {
        const { data } = await deleteMenu(id);
        if (data) {
          message.success("菜单删除成功");
          loadPage();
        }
      };
      const handleAddChild = async (parentId: number) => {
        DialogEdit.value.open(undefined, parentId);
      };
      return {
        columns,
        tableData,
        DialogEdit,
        handleAdd,
        handleEdit,
        handleDelte,
        handleAddChild,
      };
    },
  });
</script>
